<script setup>
import { inject, onMounted, ref, computed } from 'vue'
import { useSqliteStore } from '@renderer/store/sqliteData.js'
import MyTable from '../../components/com-tabel.vue'
import { initData } from '../../utils/initData'
const echarts = inject('echarts')
const sqliteStore = useSqliteStore()
const option = ref({
  title: {
    text: ''
    // textStyle: {
    //   color: '#333', // 文本颜色
    //   fontSize: '16px', // 字体大小
    //   fontWeight: 'bold' // 字体粗细
    //   // 可以添加更多样式
    // }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['1']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    type: 'value'
  },
  series: []
})
const classNameList = computed(() => {
  return sqliteStore.getClassList().map((e) => e + '班')
})
const getCorrectSum = (list) => {
  let max = new Date().getMonth() + 1
  console.log('max', max)
  let month = new Array(max).fill(0)
  console.log(list)
  list.forEach((e) => {
    console.log(Number(e.month))
    console.log(e.correct)

    month[Number(e.month) - 1] = e.correct
  })
  console.log(month)

  return month
}
const chart = ref(null)
onMounted(async () => {
  await init()
  for (const item of data.value) {
    console.log(item.class)
    option.value.series.push({
      name: item.class,
      type: 'line',
      data: getCorrectSum(item.answerByMonth),
      smooth: true
    })
    option.value.legend.data.push(item.class)
  }
  var chartDom = chart.value
  var myChart = echarts.init(chartDom)
  myChart.setOption(option.value)
  // 监听窗口大小变化事件
  window.addEventListener('resize', function () {
    myChart.resize()
  })
})
const label = ref([
  { label: '班级', prop: 'class' },
  { label: '总人数', prop: 'sum' },
  { label: '男生', prop: 'boy', slotName: 'boy' },
  { label: '女生', prop: 'girl', slotName: 'girl' },
  { label: '回答情况', prop: 'answerSituation', slotName: 'answerSituation', width: '200' }
])
const data = ref([])
const init = async () => {
  await initData(sqliteStore)
  let list = sqliteStore.getClassList()
  data.value = list.map((e) => {
    return {
      class: e.class + '班',
      sum: e.userNum,
      boy: e.boy,
      girl: e.girl,
      answerSituation: [e.correct, e.basicallyCorrect, e.incorrect],
      answerByMonth: e.result
    }
  })
}
</script>
<template>
  <div class="layout_overview">
    <div class="left">
      <div class="left-t">
        <div class="card">
          <div class="title">月度班级数据总览</div>
          <div class="content">
            <MyTable
              :operation="false"
              :show-header="false"
              :show-page="false"
              :label="label"
              :multiple-select="false"
              :data="data"
            >
              <template #boy="obj">
                <el-tag size="default">{{ obj.data.boy }}</el-tag>
              </template>
              <template #girl="obj">
                <el-tag type="success">{{ obj.data.girl }}</el-tag>
              </template>
              <template #answerSituation="obj">
                <el-steps style="width: 100%" align-center>
                  <el-step
                    v-for="(item, index) in obj.data.answerSituation"
                    :key="index"
                    :class="`step-${index}`"
                    :title="index == 0 ? '正确' : index == 1 ? '基本正确' : '错误'"
                  >
                    <template #icon>
                      <div
                        class="icon-box"
                        :class="[index == 0 ? 'success' : index == 1 ? 'primary' : 'danger']"
                      >
                        <div class="icon-font">{{ item }}</div>
                      </div>
                    </template>
                  </el-step>
                </el-steps>
              </template>
            </MyTable>
          </div>
        </div>
        <div class="card">
          <div class="title">广告位</div>
          <div class="content">
            <div style="margin: auto">广告位招租</div>
          </div>
        </div>
      </div>
    </div>
    <div class="left">
      <div class="left-t">
        <div class="card">
          <div class="title">年度班级正确对比</div>
          <div class="content">
            <div ref="chart" style="height: 100%; width: 100%"></div>
          </div>
        </div>
        <div class="card">
          <div class="title">广告位</div>
          <div class="content">
            <div style="margin: auto">广告位招租</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.step-0 .el-step__title) {
  font-weight: 400 !important;
  font-size: 0.8rem;
  color: #67c23a !important;
}
:deep(.step-1 .el-step__title) {
  font-weight: 400 !important;
  font-size: 0.8rem;
  color: #409eff !important;
}
:deep(.step-2 .el-step__title) {
  font-weight: 400 !important;
  font-size: 0.8rem;
  color: #f56c6c !important;
}
.success {
  color: #67c23a;
}
.primary {
  color: #409eff;
}
.danger {
  color: #f56c6c;
}
:deep(.is-icon) {
  border-radius: 50%;
  width: 24px;
}
:deep(.is-icon) {
  border-radius: 50%;
  width: 24px;
}
:deep(.icon-box) {
  border: 2px solid;
  border-color: inherit;
  border-radius: 50%;
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  background-color: transparent !important;
  font-size: 14px;
  height: 24px;
  justify-content: center;
  position: relative;
  transition: 0.15s ease-out;
  width: 24px;
  z-index: 1;
  .icon-font {
    color: inherit;
    display: inline-block;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
  }
}
.card {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin-bottom: 10px;
  .title {
    width: 100%;
    font-weight: 900;
    font-size: 1.3rem;
  }
  .content {
    display: flex;
    width: 100%;
    height: 100%;
  }
}
.layout_overview {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  overflow: hidden;
  // flex-direction: column;
  .left {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    .left-t {
      width: 100%;
      height: 50%;
    }
    .left-b {
      width: 100%;
      height: 50%;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
